新增畫面及移除畫面

點擊show時會呈現以下結果：

點擊hide時會呈現以下結果(消失了)：

jQuery 程式碼可以這樣寫：

<script>
    $('.btn-show').click(
      function () {
        $('.box').addClass('show');
      
    }
    )
    $('.btn-hide').click(
      function () {
        $('.box').removeClass('show');
      }
    )
    
 </script>
    

<script>
   $('.btn-show').click(
     function () {
       // $('.box').fadeIn();
       // $('.box').stop().slideDown();
       $('.box').stop().slideDown();
     }
   )

   $('.btn-hide').click(
     function () {
       // $('.box').fadeOut();
       $('.box').stop().slideUp();
     }
   )

   $('.btn-toggle').click(
     function () {
       $('.box').stop().fadeToggle();
       // $('.box').stop().slideToggle();
       // $('.box').stop().toggle();
     }
   )
   
 </script>